{{template "admin/layout/header_full.html" .}}
<form class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">菜单名称<span class="x-red">*</span></label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required" placeholder="请输入菜单名称" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" id="menuLevel">
        <label class="layui-form-label">菜单等级<span class="x-red">*</span></label>
        <div class="layui-input-block">
            <select name="level" lay-verify="required" lay-filter="menuSelect">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item" id="menuIcon">
        <label class="layui-form-label">菜单图标<span class="x-red">*</span></label>
        <div class="layui-input-inline">
            <input type="text" name="icon" lay-verify="required" placeholder="请输入菜单的unicode编码" autocomplete="off"
                   class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux"><a href="http://x.xuebingsi.com/x-admin/v2.2/unicode.html" target="_blank">图标地址</a></div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">序号</label>
        <div class="layui-input-block">
            <input type="number" name="order" placeholder="请输入序号(默认为0)" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addMenu">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script>
    var form;
    layui.use(['form', 'jquery'], function () {
        form = layui.form;
        var $ = layui.jquery;

        form.on('submit(addMenu)', function (data) {
            $.post("/admin/menu/create", data.field, function (result) {
                parent.layer.msg(result.message);
                if (result.code === 0) {
                    ReloadLists()
                }
            });
            return false;
        });

        form.on('select(menuSelect)', function (data) {
            delMenu();
            switch (parseInt(data.value)) {
                case 1:
                    addIcon();
                    break;
                case 2:
                    addMenu(parseInt(data.value));
                    break;
                case 3:
                    addMenu(parseInt(data.value));
                    break;
            }
            return false;
        });

        function delMenu() {
            $("#topSelect").remove();
            $("#menuUrl").remove();
            $("#menuIcon").remove();
        }

        function addMenu(level) {
            layer.load();
            $.get("/admin/menu/lists", {level: level - 1}, function (result) {
                if (result.code === 0) {
                    let html = '<div class="layui-form-item" id="topSelect">\n' +
                        '    <label class="layui-form-label">上级菜单<span class="x-red">*</span></label>\n' +
                        '    <div class="layui-input-block">\n' +
                        '        <select name="top_id" lay-verify="required">\n' +
                        '        <option value="">请选择上级菜单</option>\n';
                    $(result.data.lists).each(function (index, element) {
                        html += '<option value="' + element.id + '">' + element.name + '</option>\n'
                    });
                    html += '</select>\n' +
                        '    </div>\n' +
                        '    </div>\n' +
                        '<div class="layui-form-item" id="menuUrl">\n' +
                        '    <label class="layui-form-label">菜单URL<span class="x-red">*</span></label>\n' +
                        '    <div class="layui-input-block">\n' +
                        '        <input type="text" name="url" lay-verify="required" placeholder="请输入URL(例如：\'/admin/menu/list\')" autocomplete="off"\n' +
                        '               class="layui-input">\n' +
                        '    </div>\n' +
                        '</div>';
                    $("#menuLevel").after(html);
                }
                form.render();
                layer.closeAll("loading");
            });
        }

        function addIcon() {
            layer.load();
            $("#menuLevel").after("<div class=\"layui-form-item\" id=\"menuIcon\">\n" +
                "        <label class=\"layui-form-label\">菜单图标<span class=\"x-red\">*</span></label>\n" +
                "        <div class=\"layui-input-inline\">\n" +
                "            <input type=\"text\" name=\"icon\" lay-verify=\"required\" placeholder=\"请输入菜单的unicode编码\" autocomplete=\"off\"\n" +
                "                   class=\"layui-input\">\n" +
                "        </div>\n" +
                "        <div class=\"layui-form-mid layui-word-aux\"><a href=\"http://x.xuebingsi.com/x-admin/v2.2/unicode.html\" target=\"_blank\">图标地址</a></div>\n" +
                "    </div>");
            form.render();
            layer.closeAll("loading");
        }
    });
</script>
{{template "admin/layout/footer_full.html" .}}